// 课程列表组件
// base
require("../../both/base.js");
// css
require("./UserCourseList.scss");

// js
import UserCoursePanel from "../UserCoursePanel/UserCoursePanel.jsx";

const majors = ["ALL","Web","IOS","Android","UI","嵌入式"]

class UserCourseList extends React.Component{
    constructor(props){
        super(props)
        const {init} = this.props
        init()

        this.state = {
            filterIdx : 0,
            gist : "time"
        }
    }

    filterCourseWrap(e){
        var li = e.target
        if(li.nodeName !== "LI"){  // 防止误点ul
            return
        }

        var lists = e.target.parentNode.children
        var idx = Array.prototype.indexOf.call(lists,li)

        const {filter} = this.props
        filter(majors[idx])

        this.setState({
            filterIdx : idx
        })
    }

    changeSortWrap(gist){
        var self = this
        const {sort} = this.props

        return function(e){
            self.setState({
                gist
            })

            sort(gist)
        }
    }

    changePageWrap(page){
        var self = this
        const {changePage} = self.props
        var regx = new RegExp("disable")   // test is disable 也可以加一个isDisable参数给changePageWrap

        return function(e){
            if(regx.test(e.target.className)){
                return
            }

            changePage(page)
        }
    }

    componentDidMount(){
        var self = this
    }

    render(){
        var self = this

        const {page,totalPage} = self.props

        const filterCourseWrap = this.filterCourseWrap.bind(this)
        const changeSortWrap = this.changeSortWrap.bind(this)
        const changePageWrap = this.changePageWrap.bind(this)

        const list = this.props.courses.map((ele,idx) => {
            return <li key={ele.id.toString()}>
                <UserCoursePanel title={ele.title}
                                 imageSrc={ele.cover}
                                 courseNumber={ele.courseNumber}
                                 price={0}
                                 studentNumber={ele.participantCount}
                                 courseId={ele.id}
                                 starNum={ele.starNum}
                />
            </li>
        });

        var pageLists = []
        for(var i = 0; i < totalPage; i++){
            if(i < 6){      // 小于6页
                pageLists.push(
                    <li key={i} className={i + 1 == page ? "page cur" : "page"} onClick={changePageWrap(i + 1)}>{i + 1}</li>
                )
            }
        }
        if(pageLists.length > 6){
            pageLists = pageLists.slice(page - 1,page + 5)     // 切6个
        }

        return (
            <div className="user_course_list_cr bln">
                <div className="user_course_list_title">全部课程</div>
                <div className="user_course_list_direction">
                    <div className="title">方向:</div>
                    <ul className="user_course_list_dr_item" onClick={filterCourseWrap}>
                        <li className={self.state.filterIdx == 0 && "cur"}>全部</li>
                        <li className={self.state.filterIdx == 1 && "cur"}>Web开发</li>
                        <li className={self.state.filterIdx == 2 && "cur"}>IOS开发</li>
                        <li className={self.state.filterIdx == 3 && "cur"}>Android开发</li>
                        <li className={self.state.filterIdx == 4 && "cur"}>UI设计</li>
                        <li className={self.state.filterIdx == 5 && "cur"}>智能硬件开发</li>
                    </ul>
                </div>
                <div className="user_course_list_sort_by">
                    <div className="fl">
                        <div className={this.state.gist == "time" ? "sort_by_item cur" : "sort_by_item"} onClick={changeSortWrap("time")}>最新</div>
                        <div className={this.state.gist == "popularity" ? "sort_by_item cur" : "sort_by_item"} onClick={changeSortWrap("popularity")}>最热</div>
                    </div>
                    <div className="fr">
                        <div className="filter sort_by_item">
                            <label htmlFor="radio_input_filter">
                                <input id="radio_input_filter" className="radio" type="checkbox" name="filter"/>
                                <span className="radio_input"></span>隐藏已观看课程
                            </label>
                        </div>
                        <div className="sort_by_item cur_page">{page}</div><div className="sort_by_item total_page">/{totalPage}</div>
                        <div className={page == 1 ? "page_before sort_by_item disable" : "page_before sort_by_item"} onClick={changePageWrap(page - 1)}>&lt;</div>
                        <div className={page == totalPage ? "page_next sort_by_item disable" : "page_next sort_by_item"} onClick={changePageWrap(page + 1)}>&gt;</div>
                    </div>
                </div>
                <ul className="user_course_list">
                    {list}
                </ul>
                <div className="user_course_list_paging">
                    <ul className="paging">
                        <li className={totalPage == 1 || page == 1 ? "disable" : null} onClick={changePageWrap(1)}>首页</li>
                        <li className={totalPage == 1 || page == 1 ? "disable" : null} onClick={changePageWrap(page - 1)}>上一页</li>
                        {pageLists}
                        <li className={page == totalPage ? "disable" : null} onClick={changePageWrap(page + 1)}>下一页</li>
                        <li className={page == totalPage ? "disable" : null} onClick={changePageWrap(totalPage)}>尾页</li>
                    </ul>
                </div>
            </div>
        )
    }
}

export default UserCourseList;